<template>
  <h2>App父级组件:Suspense组件使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
      <!-- <AsyncComponents /> -->
      <AsyncAddress/>
    </template>
    <template v-slot:fallback>
      <!-- loading的内容 -->
      <h2>Loading...</h2>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent, defineComponent } from "vue";
// import AsyncComponents from './AsyncComponents'
import AsyncAddress from './AsyncAddress'
//vue2中的动态引入组件的写法
// const AsyncComponents = () => import("./AsyncComponents");
//vue3中动态引入的写法
// const AsyncComponents = defineAsyncComponent(() => import("./AsyncComponents"));

export default defineComponent({
  name: "App",
  components: {
    // AsyncComponents,
    AsyncAddress
  },
});
</script>

<style lang="less" scoped>
</style>
